<script type="text/javascript">
<!--
{literal}
    $(document).ready(function() {
        $('table#itemListMenu a').click(function() {
	        if($(this).parent('td').hasClass('active') ){
	           return;
	        }
	        $('#itemListMenu td').removeClass('active');
	        $(this).parent('td').addClass('active');
        });
    });
    
    function showTab(index) {
        $('#tabDiv div.tab').hide();
        $('#tabDiv #tab_' + index).show();
    }
{/literal}
//-->
</script>
<!-- Menus -->
<div>
<input type="hidden" id="ticketId" value="{$ticketId}">
<table cellspacing="0" cellpadding="0" style="width: 100%;" class="subNavigator" id="itemListMenu">
	<tbody>
	    <tr>
	        <td class="active">
	            <a href="javascript:showTab(0)">{translate}Input service_2{/translate}</a>
	        </td>                       
	        <td class="last">
	            <a href="javascript:showTab(1)">{translate}Input medicine{/translate}</a>
	        </td>                    
	    </tr>
	</tbody>
</table>
</div>
        
<div id="tabDiv" style="display: block; margin-top: 3px;">
	<!-- Adding service -->
	<div style="display: block;" id="tab_0" class="tab">
	{include file="insurance_payment/element_add_service.html"}
	</div>
	
	<!-- Adding medicine -->
	<div style="display:none;" id="tab_1" class="tab" >
	{include file="insurance_payment/element_add_medicine.html"}
	</div>
</div>

<!-- Payment item list -->
<div id="serviceListDiv" style="margin-top: 10px;">
    {$paymentItemList}
</div>